<template>
  <div class="x-pie">
    <div :id="id" class="pie-ctx"></div>
  </div>
</template>
<script>
export default {
  name: "xpie",
  props:{
    id:{
      type:String,
      default:""
    },
    data:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      option: {

        legend: {
          width:20,
          // orient:"vertical",
          height:8,
          bottom:10,
          left: 50,
          icon:"rect",
          itemWidth: 10,  // 设置宽度
      
      　　itemHeight: 8, // 设置高度
      
      　　itemGap: 10, // 设置间距
          textStyle:{
              color:'#fff',
              fontSize:14
          }
        },
        color:['#209CFF','#68E0CF','#DEA55C','#E16757','#A1F68F'],
        series: [
          {
            type: "pie",
            electedOffset :0,
             hoverAnimation:false,
            radius: ["40%","55%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: this.data
          }
        ]
      }
    };
  },
  
  mounted() {
    this.drawPie();
  },
  methods: {
    drawPie() {
      let echarts = this.$echarts.init(document.getElementById(this.id));
      echarts.setOption(this.option);
    }
  }
};
</script>
<style lang="less" scoped>
.x-pie {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .pie-ctx {
    width: 100%;
    height: 100%;
  }
}
</style>